import 'package:flutter/material.dart';
import 'package:hello_flutter/Planet.dart';

class PlanetRow extends StatelessWidget {
  final Planet planet;

  PlanetRow(this.planet);

  @override
  Widget build(BuildContext context) {
    final baseTextStyle = const TextStyle(fontFamily: 'Poppins');
    final regularTextStyle = baseTextStyle.copyWith(
        color: const Color(0xffb6b2df),
        fontSize: 9.0,
        fontWeight: FontWeight.w400);
    final subHeaderTextStyle = regularTextStyle.copyWith(fontSize: 12.0);
    final headerTextStyle = baseTextStyle.copyWith(
        color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.w600);

    final planetThumbnail = new Container(
      margin: new EdgeInsets.symmetric(vertical: 16.0),
      alignment: FractionalOffset.centerLeft,
      child: new Hero(
          tag: "planet-hero-${planet.id}",
          child: new Image(image: new AssetImage(planet.image))),
      height: 92.0,
      width: 92.0,
    );

    Widget _planetValue({String value, String image}) {
      return new Row(children: <Widget>[
        new Image.asset(image, height: 12.0),
        new Container(width: 8.0),
        new Text(planet.gravity, style: regularTextStyle),
      ]);
    }

    final planetContent = new Container(
        margin: new EdgeInsets.fromLTRB(76.0, 16.0, 16.0, 16.0),
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Container(
              height: 4.0,
            ),
            new Text(
              planet.name,
              style: headerTextStyle,
            ),
            new Container(
              height: 10.0,
            ),
            new Text(
              planet.location,
              style: subHeaderTextStyle,
            ),
            new Container(
              margin: new EdgeInsets.symmetric(vertical: 8.0),
              height: 2.0,
              width: 18.0,
              color: new Color(0xff00c6ff),
            ),
            new Row(
              children: <Widget>[
                new Expanded(
                    child: _planetValue(
                        value: planet.distance,
                        image: 'assets/img/ic_distance.png')),
                new Expanded(
                    child: _planetValue(
                        value: planet.gravity,
                        image: 'assets/img/ic_gravity.png'))
              ],
            )
          ],
        ));

    final planetCard = new Container(
      height: 120.0,
      margin: new EdgeInsets.only(left: 46.0),
      child: planetContent,
      decoration: new BoxDecoration(
          color: new Color(0xff333366),
          shape: BoxShape.rectangle,
          borderRadius: new BorderRadius.circular(8.0),
          boxShadow: [
            new BoxShadow(
                color: Colors.black12,
                blurRadius: 10.0,
                offset: new Offset(0.0, 10.0))
          ]),
    );

    return new Container(
//      margin: const EdgeInsets.only(
//          top: 16.0, bottom: 16.0, left: 24.0, right: 24.0),
      //TODO 为什么使用const？
      margin: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
      child: new Stack(
        children: <Widget>[planetCard, planetThumbnail],
      ),
    );
  }
}
